<template>
  <div>
    <dept-edit ref="deptEdit" v-on:save-finished="searchSetmeal"></dept-edit>
    <el-carousel :interval="2000" arrow="always">
      <el-carousel-item v-for="item in imagebox" :key="item.id">
        <img width="100%" height="300px" :src="item.idView" class="image">
      </el-carousel-item>
    </el-carousel>
    <el-divider content-position="right"><router-link to="/patientsetmeal" tag="a">更多套餐</router-link></el-divider>
    <el-row>
      <template v-for="(setmeal,i) in Setmeal" v-if="i<6">
      <el-col :span="8">
         <el-card :body-style="{ padding: '0px' }">
            <img height="200px" :src=setmeal.img class="image">
            <div style="padding: 14px;">
              <span>{{ setmeal.name }}</span>
              <div class="bottom clearfix">
                <time class="time">适用性别：<span style="color:red">{{ setmeal.sex == "0" ? "不限" : setmeal.sex == "1" ? "男" : "女" }}</span></time>
                <time class="time">适用年龄：<span style="color:red">{{ setmeal.age }}</span></time>
                <time class="time">价格：<span style="color:red">{{ setmeal.price }}</span></time>
                <el-button type="text" class="button" @click="yy(setmeal.id)">预约</el-button>
                <el-button type="text" class="button" @click="selectId(setmeal)" style="padding:0 20px 0 0">查看详情</el-button>
              </div>
           </div>
         </el-card>
      </el-col>
      </template>
    </el-row>
    <el-divider></el-divider>
  </div>
</template>

<script>
import DeptEdit from '@/components/nd/deptEdit'
import { listAllSetmeal } from "@/api/setmeal";

export default {
  data() {
    return {
      Setmeal:{},
      imagebox:[{id:0,idView:require('../../assets/images/1.jpg')},
      {id:1,idView:require('../../assets/images/2.jpg')},
      {id:2,idView:require('../../assets/images/3.jpg')},]
    }
  },
  methods: {
    searchSetmeal(){
      listAllSetmeal()
        .then((response) => {
          console.log(response);
          this.Setmeal=response.data
        })
        .catch((error) => {
          this.outputError(error);
        });
    },
    //编辑按钮
    async yy(index) {
      console.log(index)
      this.$refs.deptEdit.$emit('openEditDeptDialog',index)
    },
    selectId(i){
      console.log(i)
      this.$router.push({
        path: '/setmealdetails',
        query: {
          data: i.id
        }
  })
    },
    //错误信息
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error",
      });
    },
  },
  components: { DeptEdit },
  created() {
    this.searchSetmeal()
  }
};

</script>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>